<template>
  <div class="Steps">
    <div class="Steps-item">
      <p class="Steps-item-left-tm"></p>
      <p :class="{'Steps-item-right-red': activeindex >= 1}"></p>
      <div :class="{'Steps-item-num': true, 'active-num': activeindex >= 1 }">1</div>
      <div :class="{'Steps-item-desc': true, 'active-desc': activeindex >= 1 }">选择影片场次</div>
    </div>
    <div class="Steps-item">
      <p :class="{'Steps-item-left-red': activeindex >= 2}"></p>
      <p :class="{'Steps-item-right-red': activeindex >= 2}"></p>
      <div :class="{'Steps-item-num': true, 'active-num': activeindex >= 2 }">2</div>
      <div :class="{'Steps-item-desc': true, 'active-desc': activeindex >= 2 }">选择座位</div>
    </div>
    <div class="Steps-item">
      <p :class="{'Steps-item-left-red': activeindex >= 3}"></p>
      <p :class="{'Steps-item-right-red': activeindex >= 3}"></p>
      <div :class="{'Steps-item-num': true, 'active-num': activeindex >= 3 }">3</div>
      <div :class="{'Steps-item-desc': true, 'active-desc': activeindex >= 3 }">14分钟内付款</div>
    </div>
    <div class="Steps-item">
      <p :class="{'Steps-item-left-red': activeindex >= 4}"></p>
      <p class="Steps-item-right-tm"></p>
      <div :class="{'Steps-item-num': true, 'active-num': activeindex >= 4 }">4</div>
      <div :class="{'Steps-item-desc': true, 'active-desc': activeindex >= 4 }">影院取票观影</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Steps {
  width: 1200px;
  height: 60px;
  display: flex;
  .Steps-item {
    width: 300px;
    height: 60px;
    display: flex;
    position: relative;
    .Steps-item-desc {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      color: #999;
      font-size: 14px;
    }
    .active-desc {
      color: red;
    }
    .Steps-item-num{
        width: 16px;
        height: 16px;
        font-size: 12px;
        background-color: #ffd8d7;
        color: #fff;
        text-align: center;
        line-height: 16px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 14px;
    }
    .active-num{
        background-color: red;
    }

    p {
      width: 150px;
      height: 4px;
      margin-top: 20px;
      background-color: #ffd8d7;
    }
    .Steps-item-left-tm {
      background-color: transparent;
    }
    .Steps-item-left-red {
      background-color: red;
    }
    .Steps-item-right-tm {
      background-color: transparent;
    }
    .Steps-item-right-red {
      background-color: red;
    }
    
  }
}
</style>
<script>
export default {
    props: ['activeindex']
};
</script>
